<template>
  <view class="index">
    <view class="data">
      <div v-if="treeData.length > 0" class="item_box">
        <div
          v-for="item in treeData"
          :key="item.id"
          class="item"
          @click="indentDetail(item)"
        >
          <div class="top">
            <div class="middle">
              <p style="margin-bottom: 1vh;font-size: 4vw;">{{ item.donate_total }}元</p>
              <div class="spec">
                <span>姓名: </span>
                <span class="right">{{
                  item.name
                }}</span>
              </div>
            </div>
            <div class="right ">
              <img :src="rightImg" alt="" width="20px" height="20px">
            </div>
          </div>
          <div class="bottom">
            <p class="aaa">助绿时间: {{ item.pay_at.slice(0, 10) }}</p>
          </div>
        </div>
      </div>
      <div class="none_data" v-else>暂无数据</div>
    </view>
  </view>
</template>

<script>
// vue
import { reactive, toRefs, onMounted, ref } from "vue";
// taro
import Taro from "@tarojs/taro";
import { useState, useDidShow } from "@tarojs/taro";
// img
import imgUrl2 from "../../images/wx.jpg"; // 请替换为您实际的图片路径
import right from "../../assets/img/right.png"

// info
import { useInfoStore } from '../../store/info'
export default {
  name: "ReInfo",
  components: {},
  setup() {
    // store
    const infoStore = useInfoStore()

    // img
    const rightImg = ref(right)

    const treeData = ref([
    ]);

    // 跳转参数
    const indentDetail = (item) => {
      const params = item;
      const queryString = Object.keys(params)
        .map((key) => `${key}=${params[key]}`)
        .join("&");
      Taro.navigateTo({
        url: `/pages/indentDetail/index?${queryString}`,
      });
    };


    const getTreeData = () => {
      if(infoStore.info.code == 0){
        // 直接读
        treeData.value = infoStore.info.data
      } else if (!Taro.getStorageSync("openid")) {
        getOpenIdFn(); // 假设openid被篡改
      } else {
        getTreeDataApi();
      }
    };
    const getOpenIdFn = () => {
      Taro.login({
        success(res) {
          if (res.code) {
            Taro.request({
              url:
                "https://tree-planting.dgsxczxcjh.org.cn/api" +
                "/base/WeChat/getMpOpenid",
              method: "POST",
              data: { js_code: res.code },
              success: (res) => {
                // 统一处理code = 0
                const { data } = res.data.data;
                console.log(data, "data");
                const myRegisterForm = {
                  openid: data.openid,
                  sessionKey: data.session_key,
                };
                const openid = Taro.getStorageSync("openid");
                if (data.openid != openid) {
                  Taro.setStorageSync("openid", data.openid);
                  getTreeDataApi();
                }
              },
              fail: (err) => {
                console.log(err, "err"); //
                Taro.showToast({
                  title: '错误',
                  icon: 'none',
                  duration: 2000
                })
              },
            });
          }
        },
      });
    };
    const getTreeDataApi = () => {
      // loadDing
      Taro.showLoading({
        title: '加载中',
      })
      Taro.request({
        url:
          "https://tree-planting.dgsxczxcjh.org.cn/api" +
          "/planting/listDonateRecord",
        method: "POST",
        data: { openid_mp: Taro.getStorageSync("openid") },
        success: (res) => {
          // 统一处理code = 0
          if (res.data.code == 0) {
            console.log(res.data, "res.data"); //
            treeData.value = res.data.data;
            infoStore.changeInfo(res.data)
            Taro.hideLoading()
          } else {
            console.log(res.data, "res.data"); //
          }
        },
        fail: (err) => {
          Taro.hideLoading()
          console.log(err, "err"); //
          Taro.showToast({
            title: '错误',
            icon: 'none',
            duration: 2000
          })
        },
      });
    };
    // 使用 useDidShow 钩子替代 onShow 生命周期
    useDidShow(() => {
      getTreeData();
    });

    return {
      treeData,
      indentDetail,
      rightImg,
    };
  },
};
</script>

<style lang="scss">
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
.data {
  background-color: #f6f6f6;
  width: 100vw;
  min-height: 100vh;
  .bg {
    width: 100vw;
    padding-top: 1vh;
    .card {
      display: flex;
      // align-items: center;
      background-color: #fff;
      width: 88vw;
      // height: 9vh;
      border-radius: 4vw;
      padding: 2.5vh 2vw;
      margin-left: 4vw;
      .img {
        border: 1px solid #e6e6e6;
        margin-left: 2vw;
        width: 16vw;
        height: 16vw;
        border-radius: 50%;
        background-image: url("../../images/wx.jpg");
        // background-color: #fcf;
        background-size: cover; /* 图片完全覆盖div区域 */
        background-position: center; /* 图片居中显示 */
      }
      .headImg {
        // background-image: url("https://www.2008php.com/2020_Website_appreciate/2020-08-25/20200825210203.jpg");

        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        background-size: cover; /* 图片完全覆盖div区域 */
        background-position: center; /* 图片居中显示 */
      }
      .right {
        margin-left: 4vw;
        text-align: left;
        .name {
          margin-top: 1vh;
          margin-bottom: 1vh;
          font-weight: 600;
          font-size: 5vw;
        }
        .bottomData {
          display: flex;
          font-size: 4vw;
          .left {
            margin-right: 2vw;
          }
          .gleen {
            color: #afeba5;
            margin-left: 1vw;
            // position: relative;
            // top: 50%;
            // transform: translateY(-50%);
          }
          .treeNum {
            display: flex;
            align-items: center;
            line-height: 3vh;
            height: 3vh;
          }
        }
      }
    }
  }
  // height: 100vh;
  .none_data {
    width: 100vw;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
  }
}
.item_box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 2vh;
  .item {
    font-size: 4vw;
    margin-bottom: 2vh;
    text-align: left;
    width: 86vw;
    background-color: #fff;
    border-radius: 3vw;
    padding: 1vh 3vw;
    .top {
      display: flex;
      justify-content: space-between;
      margin: 0 2vw;
      .middle {
        display: flex;
        flex-direction: column;
        .spec {
          color: #aaa;
          display: flex;
          .right {
            margin-left: 1vw;
          }
        }
      }
      .right {
        position: relative;
        img {
          position: absolute;
          top: 50%;
          right: 6%;
        }
      }
      .money_color {
        color: #00a565;
      }
    }
    .bottom {
      margin: 0 2vw;
    }
    .aaa {
      color: #aaa;
    }
  }
  p {
    margin: 0.5vh 0;
  }
}
</style>
